<script setup>
import router from '@/router/index.js'
import { getAnnouncementList } from '@/api/modules/help-center.js'
import { useI18n } from "vue-i18n";

const { t } = useI18n()

const getImg = (imgName) => {
  return new URL(`../assets/img/${imgName}`, import.meta.url).href
}

const imgArr = ref([getImg('banner09.jpg'), getImg('banner08.jpg')])
const PackageStr = ref('') // 查询搜索条件

const LatestActive = ref('4') // 最新动态切换tabs标识
const stepList = computed(() => {
  return [
    {
      title: t('content.home.OnlineShopping'),
      description: t('content.home.OnlineShoppingDetails'),
      img: getImg('homeStepFirst.png'),
      bgColor: 'bg-gradient-to-r from-[#34c4c7] to-[#54d2d5]',
      titleColor: '#34C4C7'
    },
    {
      title: t('content.home.ForecastPackage'),
      description: t('content.home.ForecastPackageDetails'),
      img: getImg('homeStepSecond.png'),
      bgColor: 'bg-gradient-to-r from-[#fa728b] to-[#ff92a6]',
      titleColor: '#FA718A'
    },
    {
      title: t('content.home.ConsolidationApplication'),
      description: t('content.home.ConsolidationApplicationDetails'),
      img: getImg('homeStepThird.png'),
      bgColor: 'bg-gradient-to-r from-[#ffbe1f] to-[#ffcc4e]',
      titleColor: '#FFBE1E'
    },
    {
      title: t('content.home.PaymentOrder'),
      description: t('content.home.PaymentOrderDetails'),
      img: getImg('homeStepFouth.png'),
      bgColor: 'bg-gradient-to-r from-[#5faeff] to-[#81bffd]',
      titleColor: '#5EAEFF'
    },
    {
      title: t('content.home.waitRecive'),
      description: t('content.home.waitReciveDetails'),
      img: getImg('homeStepFivth.png'),
      bgColor: 'bg-gradient-to-r from-[#7370ff] to-[#aeacff]',
      titleColor: '#726FFF'
    }
  ]
}) // 步骤流程集合
const reportList = computed(() => {
  return [
    {
      icon: 'icon-jihuorucang',
      num: 37244,
      unit: t('content.home.reportUnit1'),
      btn: t('content.home.reportBtn1')
    }, {
      icon: 'icon-daifahuo',
      num: 14247,
      unit: t('content.home.reportUnit2'),
      btn: t('content.home.reportBtn2')
    }, {
      icon: 'icon-xinzengyonghu',
      num: 215230,
      unit: t('content.home.reportUnit3'),
      btn: t('content.home.reportBtn3')
    }, {
      icon: 'icon-kefu1',
      num: 78956,
      unit: t('content.home.reportUnit4'),
      btn: t('content.home.reportBtn4')
    }
  ]
})
const dialogVisible =  ref(false) // dialog弹框显隐藏
const HJYNotice = ref([])
const findPackage = () => {
 const aa = router.push({name:'package',query:{packageId:PackageStr.value}})
 console.log('跳转返回结果',aa,router)
}

// 获取公告列表
const getCommend = () => {
  getAnnouncementList({ pageSize:6,pageNum:1,noticeType:LatestActive.value }).then((res) => {
    HJYNotice.value = res.rows
  })
}

watch(() => LatestActive.value, () => {
    getCommend()
  }, { immediate: true }
)
</script>

<template>
  <!--轮播图-->
  <el-carousel autoplay :motion-blur="true" height="auto">
    <el-carousel-item v-for="item in imgArr" :key="item" class="!h-[auto]">
      <img :src="item" alt="" class="w-[100vw]" />
    </el-carousel-item>
  </el-carousel>
  <!--查询单号-->
  <div class="bg-[#ffb500] py-[30px] px-[15px] flex justify-center">
    <div class="flex flex-col">
      <div class="flex bg-white justify-between">
        <div class="flex items-center m-2">
          <i class="iconfont icon-dingwei text-[#FFB500] pr-1" />
          <div class="text-[#FFB500] pr-2 border-r border-[#ddd] text-nowrap">{{ $t('content.home.waybill') }}</div>
        </div>
        <input type="text" v-model="PackageStr" :placeholder="$t('common.pleaseInput') + $t('content.home.waybill')" class="w-[50px] lg:w-[200px] !border-none mr-2 focus:outline-0" />
        <el-button size="large" color="#000000" class="!h-full !bg-[#000000] !text-white" @click="findPackage">{{ $t('content.home.track') }}</el-button>
      </div>
      <div class="flex justify-center mt-3">
        <el-button color="#FFB500" plain class="border border-white" @click="findPackage">
          <i class="iconfont icon-search mr-2" />
          <span>{{ $t('content.home.findArrival') }}</span>
        </el-button>
        <el-button color="#FFB500" plain class="border border-white" @click="$router.push({ name: 'calculate'})">
          <i class="iconfont icon-52 mr-2" />
          <span>{{ $t('content.home.freightCalculation') }}</span>
        </el-button>
      </div>
    </div>
  </div>
  <!--好集运 · 家私宅配服務-->
  <div class="flex justify-center px-[15px]">
    <div class="lg:w-[1024px] w-full py-[50px]">
      <h3 class="py-2 text-center text-[30px] mb-[50px] text-black">{{$t('common.title')}} · {{$t('content.home.logisticsWorryFree')}}</h3>
      <div class="grid lg:grid-cols-2 sm:grid-cols-1 text-black">
        <router-link class="flex border border-[#eee] p-5 transition hover:text-white hover:bg-[#FFB500] relative" to="/contact">
          <span class="absolute top-0 left-0 bg-[url(@/assets/img/homeFlag.png)] bg-no-repeat w-[70px] h-[28px] leading-7 text-white text-center bg-contain text-xs">{{$t('content.home.feature')}}</span>
          <div class="w-[100px] flex flex-col items-center">
            <i class="iconfont icon-diqiu text-[50px]" />
            <span class="text-sm text-center">{{ $t('content.home.majorLogistics')}}</span>
          </div>
          <div class="flex-1 flex flex-col justify-between ml-8 text-sm">
            <div>{{$t('content.home.majorServices')}}， <br />{{$t('content.home.majorDetails')}}</div>
            <div>{{$t('common.findDetails')}}>></div>
          </div>
        </router-link>
        <router-link class="flex border border-[#eee] p-5 transition hover:text-white hover:bg-[#FFB500]" to="/contact">
          <div class="w-[100px] flex flex-col items-center">
            <i class="iconfont icon-yuancaiwuzhuangbeiguanli text-[50px]" />
            <span class="text-sm text-center">{{$t('content.home.chargeStandard')}}</span>
          </div>
          <div class="flex-1 flex flex-col justify-between ml-8 text-sm">
            <div>{{$t('content.home.chargeService')}} <br />{{ $t('content.home.chargeDetails')}}</div>
            <div>{{$t('common.findDetails')}}>></div>
          </div>
        </router-link>
        <router-link class="flex border border-[#eee] p-5 transition hover:text-white hover:bg-[#FFB500]" to="" @click="dialogVisible = true">
          <div class="w-[100px] flex flex-col items-center">
            <i class="iconfont icon-ruku text-[50px]" />
            <span class="text-sm text-center">{{$t('content.home.reciveWarehouse')}}</span>
          </div>
          <div class="flex-1 flex flex-col justify-between ml-8 text-sm">
            <div>{{$t('content.home.reciveWhere')}}<br />{{$t('content.home.reciveDetails')}}</div>
            <div>{{$t('common.findDetails')}}>></div>
          </div>
        </router-link>
        <router-link class="flex border border-[#eee] p-5 transition hover:text-white hover:bg-[#FFB500]" to="/contact">
          <div class="w-[100px] flex flex-col items-center">
            <i class="iconfont icon-ocean-freight text-[50px]" />
            <span class="text-sm text-center">{{$t('content.home.logisticsRules')}}</span>
          </div>
          <div class="flex-1 flex flex-col justify-between ml-8 text-sm">
            <div>{{$t('content.home.logisticsClause')}}<br />{{$t('content.home.logisticsPrivacy')}}</div>
            <div>{{$t('common.findDetails')}}>></div>
          </div>
        </router-link>
      </div>
      <img src="@/assets/img/homeFurnitureAdvertisement.png" alt="" class="mt-[30px]" />
    </div>
  </div>
  <!--好集运流程-->
  <div class="flex justify-center px-[15px]">
    <div class="lg:w-[1024px] w-full py-[50px]">
      <h3 class="py-2 text-center text-[30px] mb-[50px] text-black">{{$t('common.title')}}{{$t('content.home.flow')}}</h3>
      <div class="grid lg:grid-cols-5 gap-4 text-black">
        <div
          v-for="(item, index) in stepList"
          :key="index"
          class="rounded-lg px-5 pt-[70px] relative text-center text-white flex flex-col items-center justify-between"
          :class="item.bgColor"
        >
          <span v-if="index < stepList.length - 1" class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-[80%] w-[30px] h-[30px] hidden items-center justify-center text-xs rounded-full bg-white text-[#E5E5E5] lg:flex" style="z-index: 1">></span>
          <b class="absolute top-0 left-1/2 -translate-y-[6px] -translate-x-1/2 w-[94px] leading-[38px] rounded-b-lg text-lg" :style="'background: ' + item.titleColor + ';'">
            STEP{{ index + 1 }}
            <img src="@/assets/img/homeStepBack.png" alt="" class="absolute top-0 right-[1px] translate-x-full" />
          </b>
          <div>
            <h3 class="text-2xl">{{ item.title }}</h3>
            <h4 class="pt-[10px] pb-[20px] text-sm">{{ item.description }}</h4>
          </div>
          <img :src="item.img" alt="" width="136" class="-mb-[20px]" />
        </div>
      </div>
    </div>
  </div>
  <img src="@/assets/img/homeStepAdvertise.jpg" alt="" class="w-full" />
  <div class="bg-[url(@/assets/img/homeStepAdvertiseBg.jpg)] bg-no-repeat bg-cover flex justify-center lg:pt-[126px] lg:pb-[82px] py-[30px] px-[15px]">
    <div class="w-full flex flex-col lg:w-[1024px] lg:flex-row">
      <div class="bg-[url(@/assets/img/homeStepAdvertiseBg2.jpg)] bg-no-repeat bg-[#F67323] flex flex-col justify-between pt-[70px] px-[30px] text-white">
        <div>
          <div class="pb-[20px] text-[32px] font-bold text-wrap lg:max-w-[390px]">{{$t('content.home.reportTtile')}}</div>
          <div>
            <p class=" lg:max-w-[390px]">{{$t('content.home.reportDetails1')}}</p>
            <p class=" lg:max-w-[390px]">{{$t('content.home.reportDetails2')}}</p>
          </div>
        </div>
        <div class="pt-[30px] pb-[10px]">
          <i class="iconfont icon-right text-[44px] cursor-pointer" />
        </div>
      </div>
      <div class="flex-1 lg:ml-5 grid lg:grid-cols-2 gap-3">
        <div v-for="item in reportList" :key="item.icon" class="flex items-center justify-between bg-white p-[15px]">
          <div>
            <i class="iconfont text-[30px] text-[#FF8314] p-3 border border-[#FF8314] rounded-full" :class="item.icon" />
          </div>
          <div class="flex flex-col items-end">
            <div class="text-sm text-[#999] flex items-baseline leading-[1]">
              <div class="w-[110px] text-[#f88228] text-right text-[36px] font-bold truncate">{{ item.num }}</div>
              <div class="text-nowrap">&nbsp;/ {{ item.unit }}</div>
<!--              <b class="text-[#f88228] text-[36px]">{{ item.num }}</b> / {{ item.unit }}-->
            </div>
            <div class="leading-[28px] text-[#666] text-center bg-[#eeeeee] mt-[10px] text-sm px-3">{{ item.btn }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--最新动态-->
  <div class="flex justify-center px-[15px]">
    <div class="lg:w-[1024px] w-full py-[50px]">
      <h3 class="py-2 text-center text-[30px] text-black">{{$t('content.home.dynamicTitle')}}</h3>
      <p class="text-center text-[#666]">{{$t('content.home.dynamicDetails')}}</p>
      <el-tabs v-model="LatestActive">
        <el-tab-pane :label="$t('content.helpCenter.questionAnswer')" name="4" class="grid grid-cols-1 lg:grid-cols-2 gap-3">
          <div v-for="(item) in HJYNotice" :key="item.id" class="flex" @click="$router.push({name: `notice`, query: { id: item.id }})">
            <div class="px-[20px] py-[10px] bg-[#eee] text-black">
              <div class="border-b border-[#ddd] pb-1">
                {{ new Date(item.createTime).getMonth() + 1 }}-{{ new Date(item.createTime).getDate() }}</div>
              <div class="pt-1">{{ new Date(item.createTime).getFullYear() }}</div>
            </div>
            <div class="ml-2">
              <h2 class="text-xl text-[#666] cursor-pointer hover:text-[#ffa900]">
                {{ item.title }}
              </h2>
              <p class="text-[#666] descration cursor-pointer hover:text-[#ffa900]">
                {{ item.description }}
              </p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('content.helpCenter.systemAnnouncement')" name="5" class="grid grid-cols-1 lg:grid-cols-2 gap-3">
          <div v-for="(item) in HJYNotice" :key="item.id" class="flex" @click="$router.push({name: 'notice', query: { id: item.id }})">
            <div class="px-[20px] py-[10px] bg-[#eee] text-black" v-if="item">
              <div class="border-b border-[#ddd] pb-1">
                {{ new Date(item.createTime).getMonth() + 1 }}-{{new Date(item.createTime).getDate() }}
              </div>
              <div class="pt-1">{{ new Date(item.createTime).getFullYear() }}</div>
            </div>
            <div class="ml-2">
              <h2 class="text-xl text-[#666] cursor-pointer hover:text-[#ffa900]">
                {{ item.title }}
              </h2>
              <p class="text-[#666] descration cursor-pointer hover:text-[#ffa900]">
                {{ item.description }}
              </p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="flex justify-center mt-[40px]">
        <el-button color="#ffa900" :round="true" size="large" plain class="!px-10" @click="$router.push({name:'help'})">MORE+</el-button>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" width="300">
    <span>{{$t('content.home.QRdownload')}}</span>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button color="#ccc" @click="dialogVisible = false">{{$t('content.home.QRdownloadConfirm')}}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.el-tabs__item.is-active {
  color: #ffa900;
}
.el-tabs__active-bar {
  background-color: #ffa900;
}
.descration {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
